<template>
  <el-row>
    <el-col :span="22" :offset="1">
      <el-button type="primary" @click="add">添加{{last.name}}子分类</el-button>
      <el-button type="primary" @click="back">返回</el-button>
      <el-table
        :data="tableData"
        highlight-current-row
        ref="tab"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="id"
          label="ID">
        </el-table-column>
        <el-table-column
          label="图片">
          <template slot-scope="scope">
             <el-image :src="scope.row.img" style="width:100px;height:100px"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="sort"
          label="排序">
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            {{scope.row.online==1? '显示':'不显示'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-edit"
              type="info"
              @click="edit(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="del(scope.row.id,scope.row.name)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
<!-- @current-change页码改变的时候会触发的事件,会自动传递页码 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="getSon"
        >
      </el-pagination>
    </el-col>
    <edit-sub ref="edit" @refresh="getSon"></edit-sub>
    <add-sub ref="add" @refresh="getSon"></add-sub>
  </el-row>
</template>

<script>
import AddSub from './addSub.vue'
import editSub from './editSub.vue'
export default {
  components: { editSub, AddSub },
    data(){
        return{
            tableData : [],
            total : 0,
            pageSize : 5,
            current : 1,
            last:{
                id:'',
                name:''
            }
        }
    },
    mounted(){
        this.last.name = this.$route.query.name
        this.last.id = this.$route.query.id
        this.getSon()
    },
    methods:{
        back(){
            this.$router.push('/category/categoryList')
        },
        getSon(page = 1){
            this.$http.get(`/cate/${page}/${this.pageSize}/${this.last.id}`)
                .then(res => {
                    this.total = res.data.data.total
                    this.tableData = res.data.data.data
                    this.current = res.data.data.current
                    this.pageSize = res.data.data.pageSize
                })
        },
        add(){
            this.$refs.add.lastName = this.last.name
            this.$refs.add.lastId = this.last.id
            this.$refs.add.isaddUserDialog = true
        },
        edit(obj){
            this.$refs.edit.iseditUserDialog = true
            this.$refs.edit.gridCategory = obj
            obj.online == 1? this.$refs.edit.gridCategory.online = true : this.$refs.edit.gridCategory.online = false
            this.$refs.edit.current = this.current
            this.$refs.edit.lastName = this.last.name
        },
        async del(id,title) {
          try {
            await this.$confirm(`确认要删除${title}吗?`, '警告', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            const res = await this.$http.delete(`/cate/son/${id}`)
            if(res.data.code == 0){
              this.$message({
                  type: 'success',
                  message: '删除成功!'
              });
              this.getSon(this.current)
            }
          } catch (err) {
            this.$message({
                type: 'info',
                message: '已取消删除'
              });  
          }
        },
    }
}
</script>

<style>

</style>